<template>
  <div>
    <el-button @click="doLogin">doLogin</el-button>
    <hr />
    <el-button @click="sendGet">sendGet</el-button>
    <el-button @click="sendPost">sendPost</el-button>
    <el-button @click="sendPut">sendPut</el-button>
    <el-button @click="sendDelete">sendDelete</el-button>
    <el-button @click="uploadFile">uploadFile</el-button>
    <el-upload
      class="upload-demo"
      action="#"
      :http-request="uploadFile"
      :on-success="uploadSuccess"
      :on-error="uploadError"
    >
      <el-button type="primary">Click to upload</el-button>
    </el-upload>
    <hr />
    <div style="width: 800px; margin: 0px auto">
      <div v-for="item in list" :key="item.id" class="list-item">
        <div>{{ item.id }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.age }}</div>
      </div>
    </div>
  </div>
  <icons name="Battery-empty" size="24" ref="batteryIcon" />
</template>

<script setup>
import * as api from '@/api'

const doLogin = async () => {
  const res = await api.login({
    username: 'admin',
    password: '123456'
  })
  console.log(res)
  sessionStorage.setItem('token', res.token)
}

let list = $ref([])

const sendGet = async () => {
  const res = await api.getList()
  list = res.data
}
const sendPost = async () => {
  const res = await api.addItem({
    name: '小王八',
    age: 199
  })
  console.log(res)
}
const sendPut = async () => {
  const res = await api.changeItem({
    id: 2,
    name: '李四',
    age: 28
  })
  console.log(res)
}
const sendDelete = async () => {
  const res = await api.deleteItem({
    id: 2
  })
  console.log(res)
}
const uploadFile = async ({ file }) => {
  console.log(file)
  return api.upload({
    file
  })
}

const uploadSuccess = (...args) => {
  console.log('success >>> ', args)
}
const uploadError = (...args) => {
  console.log('error >>> ', args)
}
</script>

<style lang="scss" scoped>
.list-item {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  div {
    flex: 1;
  }
}
</style>
